<script setup>
import { ref } from 'vue'
import { login } from "@/api/user";
import {ElMessage} from "element-plus";
import router from "@/router";
const username = ref('')
const password = ref('')
const loginUser = () => {
  if (!username.value || !password.value) {
    ElMessage({
      message: "请输入用户名或者密码",
      type: "error"
    })
    return
  }
  login({
    username: username.value,
    password: password.value
  }).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: res.message,
        type: 'success'
      })
      
      router.push({
        path: '/tools'
      })
    }
  })
  console.log(username, password)
}
const getCookie = () => {
  console.log(document.cookie)
  const token = document.cookie.indexOf('token')
  if (token > -1) {
    console.log('已登录')
    router.push({
      path: '/tools'
    })
  } else {
    console.log('未登录')
  }
}
getCookie()
const goReg = () => {
  router.push({
    path: '/register'
  })
}
</script>

<template>
<div class="login">
  <div class="container">
    <el-form label-width="70px">
      <el-form-item label="用户名：">
        <el-input v-model="username" placeholder="用户名"/>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="password" placeholder="密码" type="password"/>
      </el-form-item>
      <div>
        <el-button type="primary" style="width: 100%" @click="loginUser">登录</el-button>
      </div>
      <div style="text-align: center;">
        <el-button type="text" @click="goReg">去注册</el-button>
      </div>
    </el-form>
  </div>
</div>
</template>

<style scoped lang="scss">
.login {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("@/assets/bg.webp");
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 400px;
    height: 300px;
    margin: auto;
    color: #fff;
    background-color: rgba(255,255,255,.5);
    border-radius: 10px;
    .el-form-item__label {
      color: #fff !important;
    }
  }
}


</style>
